<template>
  <div class="header">
    <el-row>
      <el-col class="flex" :span="3"><img class="img1" src="../../assets/img/login_topbg.png" alt=""></el-col>
      <el-col :span="5" class="title">聚宝通管理控制台</el-col>
      <el-col :span="5" class="ipTime2" :offset="7">

      </el-col>
      <el-col :span="4"  class="input">
        <el-input v-model="input" placeholder="请输入内容" size="mini" icon="el-icon-search"></el-input>
        <el-button type="primary" icon="el-icon-search" size="mini" class="button"></el-button>
      </el-col>
      <div class="people">
        <el-col :span="4">
          <el-dropdown>
            <span class="el-dropdown-link">
              <img src="../../assets/img/people.jpg" alt="">
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
  import dateformat from '../../assets/js/dateformat'
  export default {
    data () {
      return {
        input:'',
        login: {},
        dateformat: dateformat
      }
    },
    created () {
      this.getLoginLogLast()
    },
    methods: {
      logout () {
        this.$confirm('您确定要退出该平台吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.logout().then(res => {
            if (res.code === '000000') {
              this.$message.success('退出成功')
              this.$router.push('/')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
      },
      getLoginLogLast () {
        this.$api.getLoginLogLast().then(res => {
          if (res.code === '000000') {
            this.login = res.data
          }
        })
      }
    }

  }
</script>

<style lang="less">
  .header{
    height: 50px;
    .el-row{
      height:50px;
      background-color: #373d41;
      color: #fff;
      line-height:50px;

    }
    .title{
      font-size: 14px;
      text-align: left;
      padding-left: 16px;
      padding-right: 16px;
      border-right: 1px solid #2a2f32;
    }
    .img1{
      width: 80px;
      height: 30px;
      margin: 10px 0px;
      border-radius: 30px;
    }
    .flex{
      width: 183px;
      border-right: 1px solid #2a2f32;
      justify-content: space-around;
    }
    .ipTime{
      line-height: 35px;
      font-size: 13px;
      text-align: left;
    }
    .el-dropdown{
      height: 20px;
      line-height: 20px;
    }
    .el-col-5{
      width: 12%;
      height: 50px;
      text-align: center;
      font-family: "Microsoft YaHei"
    }
    .el-input__inner {
      width: 180px;
      background-color:#4F5558 ;
      color:#fff;
      border: 1px solid #4F5558;
      border-radius: 0;
    }
    .el-input__inner:focus{
      border-color: #409EFF;
      background-color:#262C30;
    }
    .input{
      position: relative;
      border-right: 1px solid #2a2f32;
      border-left: 1px solid #2a2f32;
      height: 50px;
      .button{
        position: absolute;
        top:12px;
        right: 24px;
        background: none;
        border: none;
        border-left:1px solid #C0BDC4;
        border-radius:0 ;
      }
    }
    .people{
      height: 50px;
      img{
        width: 42px;
        height:42px;
        border-radius: 50%;
        line-height: 50px;
        margin-top: 4px;
      }
    }
  }
</style>
